<template>
    <div>
        <el-row>
            <el-col :xs="1" :sm="1" :md="4" :lg="6" :xl="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="22" :sm="22" :md="16" :lg="12" :xl="12">
                <div class="grid-content bg-purple-light">
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple">
                                <div class="content">
                                    <p>使用mybatis已经是可以快速开发程序了，对于单表的curd似乎是一种可抽象的结果，下面介绍tk.mybatis的使用方式</p>
                                    <p>maven引用</p>
                                    <img src="../../assets/ContNavimg/2.png" alt>
                                    <p>我使用的是这个版本，所以相关功能介绍也是这个版本。</p>
                                    <p>使用where条件</p>
                                    <p></p>
                                    <p>
                                        当使用查询条件的时候，我们可以使用mybatis的方式写sql来解决，很多情况下，写sql并不是一个特别简单的情况，
                                        尤其是字段多的时候，需要针对每个字段进行判断是否为空等等，写起来是相当的多。
                                    </p>
                                    <p>tk.mybatis提供了一套api，可以帮助我们省去很多操作。</p>
                                    <img src="../../assets/ContNavimg/3.png" alt>
                                    <p>首先需要创建example和criteria。Example的参数是对应表的类。criteria才是我们关注的对象，他有丰富的条件。</p>
                                    <p>例如且等于</p>
                                    <img src="../../assets/ContNavimg/4.png" alt>
                                    <p>例如且等于</p>
                                    <img src="../../assets/ContNavimg/5.png" alt>
                                    <p>还有一些我们常见的操作</p>
                                    <p>in操作和between操作</p>
                                    <img src="../../assets/ContNavimg/6.png" alt>
                                    <p>通过以上的方法，我们基本已经可以满足对单表的条件比对操作了。</p>
                                    <p>排序操作</p>
                                    <p>排序操作设计的比较奇特，并不在criteria里，而是在example里。</p>
                                    <img src="../../assets/ContNavimg/7.png" alt>
                                    <p>排序的sql语句就写在setOrderByClause中就可以了。</p>
                                    <p>无论是增删改查，调用的都是ByExample的方法。</p>
                                    <p>坑点</p>
                                    <p>
                                        我们在插入和查询的时候都会使用对象来作为条件，但是如果对象里有null值，那么其实他不是我们想插入
                                        的字段，我们只想插入非null的。tk.mybatis默认没有对insert等方法做处理，而是单独开辟了一个insertSelective
                                        的方法。这个刚开始使用特别不舒服，一般都是insert包含了过滤，但是没有需要专门使用insertSelective。其
                                        他的方法也类型。
                                    </p>
                                    <p>使用查询条件的时候，使用的是对象的字段名，而不是表的列名。这个刚开始很容易抓混，不知道应该使用哪个。</p>
                                    <img src="../../assets/ContNavimg/8.png" alt>
                                    <p>
                                        当查询条件特别多的时候，请写sql。条件特别多的时候写代码特别容易抓混，而且由于条件特别多，不需要的
                                        部分太多了，例如criteria.andGreaterThan。这些最后都会成为干扰项，这种情况写sql是清晰的方式。
                                    </p>
                                    <img src="../../assets/ContNavimg/9.png" alt>
                                    <p>
                                        没有连表操作，这算是他的一个功能不足的情况，我们可以使用mybatis的连表操作，但是他确实不是一
                                        个好的写法。这里也建议直接写sql。
                                    </p>
                                </div>
                                <div class="btn">
                                    <p>小礼物走一走，来简书关注我</p>
                                    <el-button type="danger" round style="margin-top:20px;" @click="SwitchUp">赞赏支持</el-button>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :xs="1" :sm="1" :md="4" :lg="6" :xl="6">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>

<!--        赞赏-->
        <div class="zanshang" v-show="shows2">
            <el-row>
                <div class="title">
                    <el-col :span="10" :md="8" :sm="8" :xs="8"><img src="../../assets/3.jpg" alt=""></el-col>
                    <el-col :span="4" :md="8" :sm="8" :xs="8"><b>给作者送糖</b></el-col>
                    <el-col :span="10" :md="8" :sm="8" :xs="8"><i class="el-icon-sugar"></i></el-col>
                </div>
                <div class="zanshangcont">
                    <el-col :span="7" :lg="7" :md="6" :sm="6" :xs="6" v-for="(item,index) in list" :key="index">
                        <li @click="changeTabs(index)" :class="{Actives:index===ISactive}">
                        <router-link to="">
                            <i class="el-icon-sugar"></i><b>{{item}}</b><a> 颗 </a>
                        </router-link>
                        </li>
                    </el-col>
                    <el-col :span="7" :md="7" :sm="7" :xs="7" v-if="shows" class="zidingyi">
                        <router-link to="">
                            <button @click="changeTab">自定义</button>
                        </router-link>
                    </el-col>
                    <el-col :span="7" :md="7" :sm="7" :xs="7" class="writenumber" v-else>
                        <li class="zidingyi">
                            <router-link to="" class="ISShows">
                                <i class="el-icon-sugar"></i>
                                <input type="text" @keydown.enter="addTodo" v-model="msg">
                                <a> 颗 </a>
                            </router-link>
                        </li>
                    </el-col>
                    <el-col :span="22">
                        <input type="text" placeholder="给Ta留言...">
                    </el-col>
                </div>
                <el-col :span="24" class="zhifuB" v-if="shows1">
                    <b>￥{{mesage}}</b><b>，用微信支付</b><router-link to=""><button @click="SwitchCase">更换</button></router-link>
                </el-col>
<!--                更换-->
                <div class="genghuan" v-else>
                    <el-col :span="7" :xs="12"><li><img src="../../assets/weixin-gh.png" alt=""></li></el-col>
                    <el-col :span="7" :xs="12">
                        <li><img src="../../assets/zhifubao-gh.png" alt=""></li></el-col>
                    <el-tooltip placement="top">
                        <div style="text-align: center;font-size: 15px" slot="content">该网站功能暂时下线，如需使用，<br/>请到简书App操作</div>
                        <el-col :span="7" :xs="24"><li>
                            <el-button disabled>简书余额</el-button>
                        </li></el-col>
                    </el-tooltip>
                </div>
                <el-col :span="24" class="zhifuBtn">
                    <button @click="SwitchDown2">立即支付</button>
                </el-col>
                <button class="SwitchDown" @click="SwitchDown">X</button>
            </el-row>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                shows: true,
                shows1:true,
                shows2:false,
                shows3:0,
                shows5:0,
                ISactive:0,
                list: ['2', '5', '10', '20', '50'],
                mesage:'2',

            }
        },
        methods: {
            changeTab() {
                this.shows = !this.shows
                this.ISactive=""
                this.shows1=true
                // var add=document.getElementsByClassName('Actives')
                // add.className="Actives5"
                // console.log(add)
            },
            changeTabs(index) {
                this.shows = true
                this.ISactive=index
                this.shows1=true
                this.msg=''
                if (index===0) {
                    this.mesage=this.list[0]
                }
                if (index===1) {
                    this.mesage=this.list[1]
                }
                if (index===2) {
                    this.mesage=this.list[2]
                }
                if (index===3) {
                    this.mesage=this.list[3]
                }
                if (index===4) {
                    this.mesage=this.list[4]
                }
            },
            addTodo(){
                this.mesage=this.msg
            },
            SwitchCase(){
                this.shows1=false
            },
            SwitchUp(){
                this.shows2=true
            },
            SwitchDown(){
                this.shows2=false
            },
            SwitchDown2(){
                this.shows2=false
                alert("您已支付成功！")
            },
            BgColor(index){
                this.ISactives5=index
            }
        }
    };
</script>
<style scoped>
    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple-light {
        height: 48px;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
    }

    .content p {
        text-indent: 2em;
        color: #2f2f2f;
        font-size: 16px;
        margin-top: 15px;
        margin-bottom: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
    }

    .content img {
        width: 100%;
        margin-right: 15px;
    }

    .btn {
        height: 194px;
        margin-top: 50px;
        text-align: center;
    }

    .btn p {
        font-weight: bold;
        font-size: 17px;
        color: #969696;

    }

    .show-foot a {
        padding-left: 10px;
        font-size: 12px;
        color: #c8c8c8;
        text-decoration: none;
    }

    .show-foot {
        margin-top: 50px;
    }

    .copyright {
        margin-top: 2px;
        float: right;
        font-size: 12px;
        line-height: 1.7;
        color: #c8c8c8;
        text-decoration: none;
    }

    .modal-wrap {
        margin-top: 2px;
        float: right;
        font-size: 12px;
        line-height: 1.7;
        color: #c8c8c8;
        margin-right: 15px;
        text-decoration: none;
    }

    .zanshang {
        position: fixed;
        left: 50%;
        top: 50%;
        /*margin-top: -25%;*/
        z-index: 100;
        transform: translate(-50%,-50%);
        text-align: center;
        padding: 20px;
        width: 40%;
        border-radius: 10px;
        border: 1px solid #eee;
        background-color: #fff;
        box-shadow: 0 0 8px rgba(0, 0, 0, .1);
    }

    .zanshang .title {
        font-size: 16px;
        line-height: 35px;
        width: 100%;
        padding: 0 0 30px 0;
    }

    .zanshang .title i {
        line-height: 35px;
        font-size: 18px;
        color: #ea6f5a;
        float: left;
    }

    .zanshang .title img {
        float: right;
        width: 35px;
        border-radius: 50%;
    }

    .zanshang .zanshangcont {
        padding: 30px;
    }

    .zanshang .zanshangcont .router-link-active {
        display: block;
        width: 100%;
        padding: 15px 0 15px 0;
        border-radius: 10px;
        margin: 5px 0 5px;
        border: 1px solid #E6E6E6;
    }

    .zanshang .zanshangcont .router-link-active i {
        font-size: 20.5px;
    }

    .zanshang .zanshangcont .router-link-active a {
        font-size: 16px;
        color: #969696;
    }

    .zanshang .zanshangcont .router-link-active b {
        font-size: 24px;
        color: #333333;
        font-weight: 500;
    }

    .zanshangcont .el-col-7:nth-of-type(2) , .zanshangcont .el-col-7:nth-of-type(5)  {
        margin: 0 25px 0 25px;
    }

    .zidingyi button {
        border: 0;
        background-color: #fff;
        font-size: 20.5px;
    }

    .writenumber input {
        width: 50%;
        border: 0;
        text-align: center;
        font-size: 24px;
    }

    .writenumber i {
        float: left;
    }

    .writenumber a {
        float: right;
    }

    .actives{
        border: 1px solid #ea6f5a;
    }
    .zanshangcont .el-col-22 {
        margin-top: 20px;
    }
    .zanshangcont .el-col-22 input{
        width: 100%;
        border-radius: 5px;
        border: 1px solid #E6E6E6;
        padding: 15px 10px 50px 15px;
        font-size: 14px;
        color: #333333;
        background-color: rgba(180, 180, 180, 0.1);
    }
    .zhifuB {
        margin: 30px 0 20px 0;
    }
    .zhifuB b:nth-of-type(1){
        font-size: 30px;
        color: #ea6f5a;
    }
    .zhifuB b:nth-of-type(2){
        font-size: 14px;
        font-weight: 400;
        color: #333333;
    }
    .zhifuB a button{
        border: 0;
        background-color: #fff;
        font-size: 14px;
        color: #3194d0;
    }
    .zhifuBtn button{
        margin-bottom: 20px;
        padding: 8px 25px;
        font-size: 16px;
        color: #fff;
        background-color: #ea6f5a;
        border-radius: 20px;
        border: 0;
    }
    .genghuan{
        margin-left: 5%;
    }
    .genghuan .el-col-7{
        margin: 30px 0 20px 0;
    }
    .genghuan .el-col-7 {
        margin-right: 12px;
    }
    .genghuan .el-col-7 li{
        line-height: 56px;
        border-radius: 5px;
        /*width: 161px;*/
        /*height: 58px;*/
        border: 1px solid #E6E6E6;
    }
    .genghuan .el-col-7 li img{
        width: 112px;
        height: 30px;
    }
    .genghuan .el-col-7:nth-of-type(2) li img{
        width: 85px!important;
    }
    .SwitchDown{
        position: absolute;
        top: 0px;
        font-size: 25px;
        width: 30px;
        height: 30px;
        border: 1px solid #e6e6e6;
        border-radius: 50%;
    }
    .SwitchDown:hover{
        background-color: #fbfbfb;
        box-shadow: 0 0 8px rgba(0,0,0,.1);
    }
    .Actives .router-link-active{
        border:1px solid #ea6f5a !important;
    }
    .ISShows{
        border:1px solid #ea6f5a !important;
    }
    .Actives5 .router-link-active{
        border: #e6e6e6;
    }
    @media screen and (max-width: 750px){
        .zanshang{
            padding-top: 80px;
            width: 100%;
            height: 100%;
        }
        .SwitchDown{
            top: -10px;
            right: 10px;
        }
        .genghuan{
            width: 80%;
            margin-left: 10%;
        }
        .genghuan .el-col-7{
            margin: 30px 0 10px 0;
        }
        .genghuan .el-col-7:nth-of-type(3) li{
            width: 50%;
            margin: 0 0 20px 25%;
        }
        .genghuan .el-col-7 li{
            line-height: 56px;
            border-radius: 5px;
            border: 1px solid #E6E6E6;
        }
        .genghuan .el-col-7:nth-of-type(1) li{
            margin-right: 10px;
        }
    }
</style>


